/**
 * @description 样式四:新闻
 */
import AbIcon from "@/components/DecorateIcons/Ab_Icon"
import GoodImg from '@/assets/img/good.jpeg'
import React, { useEffect, useState } from "react"

function GoodList4({ base }) {

  let { limit = 8, iconFlag, labelFlag } = base

  const [list, setList] = useState(getList(limit))

  useEffect(() => {
    let newList = getList(limit)
    setList(newList)
  }, [limit])

  return (
    <div className="good-list-4">
      {
        list.map(item => (
          <div className="item" key={item.id}>

            {/* 配置项:图片 */}
            <div className="img-box">
              <img className="img" src={item.img} draggable="false" />
            </div>

            {/* 配置项:信息 */}
            <div className="info-box">

              {/* 标题 */}
              <div className="name">
                <span className="prefix">{item.prefix}:</span>
                <span className="text">{item.title}</span>
              </div>

              {/* 简介 */}
              <div className="desc" dangerouslySetInnerHTML={{ __html: item.desc }}></div>

              {/* 时间 */}
              <div className='time' >
                {
                  iconFlag &&
                  <AbIcon iconName='FieldTimeOutlined' className='icon'></AbIcon>
                }
                {
                  labelFlag &&
                  <span className="prefix">时间:</span>
                }
                <span className="text">{item.addtime}</span>
              </div>


            </div>
          </div>
        ))
      }
    </div>
  )
}


// 获取分类数据
function getList(limit) {
  let list = []
  for (let index = 0; index < limit; index++) {
    let _index = index + 1
    list.push({
      id: index,
      prefix: '商品名称',
      title: `商品${_index}`,
      img: GoodImg,
      addtime: '2024-12-11 10:20:21',
      desc: `这是简介${_index}，在新闻资讯上使用，预览才有这个元素，其它商品列表、商品推荐没有,这是简介${_index}，在新闻资讯上使用，预览才有这个元素，其它商品列表、商品推荐没有,这是简介${_index}，在新闻资讯上使用，预览才有这个元素，其它商品列表、商品推荐没有`
    })

  }
  return list
}

export default React.memo(GoodList4)